<template>
	<view class="j-nav-bar" :style="navbarStyle" :class="navbarClass">
		<!-- #ifdef H5 -->
		<!-- 模拟小程序胶囊 -->
		<!-- <view class="menuButton" :style="menuButtonStyle"></view> -->
		<!-- #endif -->
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="statusBarStyle" v-if="showStatusBar"></view>
		<!-- 导航栏内容 -->
		<view class="nav-main" :style="navMainStyle">
			<!-- 左侧内容 -->
			<view class="nav-left" v-if="showBack || leftText || $slots.left">
				<slot name="left">
					<view class="nav-back" @click="handleBack" v-if="showBack">
						<text class="back-icon iconfont icon-left" :style="{ color: fontColor }"></text>
					</view>
					<view class="nav-left-text" @click="handleLeftClick" v-if="leftText" :style="{ color: fontColor }">
						{{ leftText }}
					</view>
				</slot>
			</view>

			<!-- 中间标题 -->
			<view class="nav-center" :class="{ 'nav-center-absolute': center }">
				<slot name="center">
					<text class="nav-title" :style="titleStyleComputed">{{ title }}</text>
				</slot>
			</view>

			<!-- 右侧内容 -->
			<view class="nav-right" v-if="rightText || $slots.right">
				<slot name="right">
					<view class="nav-right-text" @click="handleRightClick" v-if="rightText" :style="{ color: fontColor }">
						{{ rightText }}
					</view>
				</slot>
			</view>
		</view>
	</view>
	<view v-if="fixed" :style="{ height: navBarInfo.totalHeight + 'px' }"></view>
</template>

<script>
export default {
	name: 'JNavBar',
	props: {
		// 基础配置
		title: { type: String, default: '' },
		showBack: { type: Boolean, default: false },
		leftText: { type: String, default: '' },
		rightText: { type: String, default: '' },

		// 样式配置
		bgColor: { type: String, default: 'transparent' }, //transparent
		fontColor: { type: String, default: '#fff' },
		titleStyle: { type: Object, default: () => ({}) },
		navStyle: { type: Object, default: () => ({}) },

		// 布局配置
		fixed: { type: Boolean, default: false },
		sticky: { type: Boolean, default: true },
		center: { type: Boolean, default: true },
		opacity: { type: Number, default: 1 },

		// 功能配置
		showStatusBar: { type: Boolean, default: true },
		statusBarColor: { type: String, default: '' },
		immersive: { type: Boolean, default: false },
		shadow: { type: Boolean, default: false },
		border: { type: Boolean, default: false },
		bgImage: { type: Boolean, default: true },

		// 自定义高度
		height: { type: [String, Number], default: '' },
		titleSize: { type: [String, Number], default: 18 }
	},
	data() {
		return {
			menuButtonInfo: { bottom: 56, height: 32, left: 281, right: 367, top: 24, width: 86 },
			navBarInfo: {
				statusBarHeight: 0,
				navBarHeight: 44,
				totalHeight: 0
			}
		};
	},
	computed: {
		// 导航栏样式类
		navbarClass() {
			return {
				'j-nav-fixed': this.fixed,
				'j-nav-sticky': this.sticky,
				'j-nav-immersive': this.immersive,
				'j-nav-shadow': this.shadow,
				'j-nav-border': this.border,
				'j-nav-bgImage': this.bgImage
			};
		},
		menuButtonStyle() {
			return {
				bottom: this.menuButtonInfo.bottom + 'px',
				height: this.menuButtonInfo.height + 'px',
				left: this.menuButtonInfo.left + 'px',
				right: this.menuButtonInfo.right + 'px',
				top: this.menuButtonInfo.top + 'px',
				width: this.menuButtonInfo.width + 'px'
			};
		},
		// 导航栏整体样式
		navbarStyle() {
			const style = {
				height: this.navBarInfo.totalHeight + 'px',
				backgroundColor: this.immersive ? 'transparent' : this.bgColor,
				opacity: this.opacity,
				...this.navStyle
			};

			if (this.fixed) {
				style.position = 'fixed';
				style.top = '0';
				style.left = '0';
				style.right = '0';
				style.zIndex = '999';
			}

			return style;
		},

		// 状态栏样式
		statusBarStyle() {
			return {
				height: this.navBarInfo.statusBarHeight + 'px',
				backgroundColor: this.statusBarColor || this.bgColor
			};
		},

		// 导航栏内容样式
		navMainStyle() {
			return {
				height: this.navBarInfo.navBarHeight + 'px',
				backgroundColor: this.immersive ? 'transparent' : this.bgColor
			};
		},

		// 标题样式
		titleStyleComputed() {
			return {
				color: this.fontColor,
				fontSize: typeof this.titleSize === 'number' ? this.titleSize + 'px' : this.titleSize,
				...this.titleStyle
			};
		}
	},
	mounted() {
		this.initNavBarInfo();
	},
	methods: {
		// 初始化导航栏信息
		initNavBarInfo() {
			try {
				const systemInfo = uni.getSystemInfoSync();

				// #ifdef MP-WEIXIN
				// 微信小程序特殊处理
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.menuButtonInfo = menuButtonInfo;
				this.navBarInfo.statusBarHeight = systemInfo.statusBarHeight || 0;
				this.navBarInfo.navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2;
				// #endif

				// #ifdef APP-PLUS
				// APP端处理
				this.navBarInfo.statusBarHeight = systemInfo.statusBarHeight || 0;
				this.navBarInfo.navBarHeight = 44;
				// #endif

				// #ifdef H5
				// H5端处理
				this.navBarInfo.statusBarHeight = 20;
				this.navBarInfo.navBarHeight = 44;
				// #endif

				// #ifdef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
				// 其他小程序
				this.navBarInfo.statusBarHeight = systemInfo.statusBarHeight || 0;
				this.navBarInfo.navBarHeight = 44;
				// #endif

				// 计算总高度
				this.navBarInfo.totalHeight = this.navBarInfo.statusBarHeight + this.navBarInfo.navBarHeight;

				// 如果设置了自定义高度
				if (this.height) {
					const customHeight = typeof this.height === 'number' ? this.height : parseInt(this.height);
					this.navBarInfo.totalHeight = customHeight;
					this.navBarInfo.navBarHeight = customHeight - this.navBarInfo.statusBarHeight;
				}
			} catch (error) {
				console.error('初始化导航栏信息失败:', error);
				// 使用默认值
				this.navBarInfo = {
					statusBarHeight: 0,
					navBarHeight: 44,
					totalHeight: 44
				};
			}
		},

		// 返回按钮点击
		handleBack() {
			this.$emit('back');
			try {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1,
						fail: (err) => {
							console.warn('navigateBack失败:', err);
							this.goToHome();
						}
					});
				} else {
					this.goToHome();
				}
			} catch (error) {
				console.error('handleBack错误:', error);
				this.goToHome();
			}
		},

		// 左侧点击
		handleLeftClick() {
			this.$emit('left-click');
		},

		// 右侧点击
		handleRightClick() {
			this.$emit('right-click');
		},

		// 跳转到首页
		goToHome() {
			try {
				uni.switchTab({
					url: '/pages/index/index',
					fail: (err) => {
						console.warn('switchTab失败:', err);
						uni.reLaunch({
							url: '/pages/index/index',
							fail: (err2) => {
								console.error('reLaunch也失败:', err2);
								uni.navigateTo({
									url: '/pages/index/index'
								});
							}
						});
					}
				});
			} catch (error) {
				console.error('goToHome错误:', error);
			}
		}
	}
};
</script>

<style lang="less" scoped>
.j-nav-bar {
	width: 100%;
	transition: all 0.3s ease;
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 100% 100%;

	&.j-nav-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}
	&.j-nav-sticky {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	&.j-nav-immersive {
		background-color: transparent;
	}

	&.j-nav-shadow {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	&.j-nav-border {
		border-bottom: 1px solid #e5e5e5;
	}
	&.j-nav-bgImage {
		background-image: url('https://xianlian.e88u.com/Images/header-bg.jpg');
		background-repeat: no-repeat;
		background-color: transparent;
	}
}

.status-bar {
	width: 100%;
	background-color: inherit;
}

.nav-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 13px;
	position: relative;
	height: 100%;
}
.menuButton {
	position: absolute;
	z-index: 2;
	background: #fff;
	border-radius: 999rpx;
}
.nav-left {
	display: flex;
	align-items: center;
	min-width: 80px;
	height: 100%;
}

.nav-center {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	&.nav-center-absolute {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 200px;
	}
}

.nav-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 80px;
	height: 100%;
}

.nav-title {
	font-size: 18px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}

.nav-back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -15px;
	cursor: pointer;
	transition: background-color 0.3s;
	&:active {
		background-color: rgba(0, 0, 0, 0.1);
	}
}

.back-icon {
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
}

.nav-left-text,
.nav-right-text {
	font-size: 16px;
	padding: 8px 12px;
	border-radius: 4px;
	transition: background-color 0.3s;
	cursor: pointer;

	&:active {
		background-color: rgba(0, 0, 0, 0.1);
	}
}
</style>
